<template>
  <div class="street-charts-01">
    <div class="charts" id="charts"></div>
  </div>

</template>

<script>
import * as echarts from 'echarts';
//学生总数
import {CountNumBySchool} from '@/api/bt/echarts'

export default {
  name: "EchartsForm",
  props: {
    list: Array,
  },
  data() {
    return {
      echarts: null,
      //学校名字
      eName: [],
      //现在
      enowNum: [],
      //所有
      eallNum: [],
      options: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['在校学生', '历史总数']
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {show: false},
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '在校学生',
            type: 'bar',
            barGap: 0,
            emphasis: {
              focus: 'series'
            },
            data: []
          },
          {
            name: '历史总数',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: []
          },
        ]
      }
    }
  },
  created() {
  },
  watch: {
    options: {
      handler: function(newValue, oldValue) {
        this.$nextTick(() => {
          this.echarts.setOption(newValue, true)
        })
      },
      deep: true
    }
  },
  methods: {
    //学生数量
    countStudent() {
      CountNumBySchool().then((response) => {
        this.eclist = response.data
        let { data } = response
        console.log(data);
        let eNames = []
        let enowNums = []
        let eallNums = []
        for (let i = 0; i < data.length; i++) {
          eNames.push(data[i].name);
          enowNums.push(data[i].nowNum);
          eallNums.push(data[i].allNum);
        }

        this.eName = eNames
        this.enowNum = enowNums
        this.eallNum = eallNums
        this.options.xAxis[0].data = this.eName
        this.options.series[0].data = this.enowNum
        this.options.series[1].data = this.eallNum
      })
    }
  },
  mounted() {
    const charts = echarts.init(
      document.getElementById('charts')
    )
    charts.setOption(this.options)
    this.echarts = charts
    this.countStudent()
  }
}
</script>

<style scoped>
.street-charts-01 {
  height: 413px;
  position: relative;
}

.charts {
  position: absolute;
  width: 600px;
  height: 300px;
  top: 60px;
}
</style>
